<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>群日历</title>
    <!-- elementUI css -->
  <link rel="stylesheet" href="/unpkg/lib-master/theme-chalk/index.css"> 
    <link rel="stylesheet" href="/css/calendar.css">
    <style type="text/css">
        html {
            min-width: 900px;
        }
        body {
            background: #f0f2f5;
            margin: 0;
            padding: 0;
        }
        /*表格页面部分 start*/
        #app{
        	margin: 20px;
        	border-radius: 2px;
        	overflow: hidden;
        }
        .publicTables_container{
        	background: #fff;
        	padding: 20px;
        }
        .publicTablesTitle_container{
        	height: 54px;
        	padding: 0 20px;
        	font-size: 14px;
        	display: flex;
        	align-items: center;
        	background: #f9f9f9;
        	border-bottom: 1px solid #f0f0f0;
        }
        .publicTables_header_container{
        	display: flex;
        	align-items: center;
        	justify-content: space-between;
        }
        .publicTables_main_container{
        	padding-top: 20px;
        }
        /*表格页面部分 end*/
        /*弹窗部分 star*/
        #app .el-dialog__body{
            padding-top: 10px;
        }
        .dialog_addGroup_container{

        }
        .dialog_addGroupSearch_container{
            
        }
        .dialog_addGroup_allGroup_container{
            margin-top: 8px;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .dialog_addGroup_allGroupLeft_container{
            
        }
        .dialog_addGroup_allGroupLeft_container span{
            font-size: 13px;
            color: #666;
        }
        .dialog_addGroup_allGroupRight_container{
            margin-right: 13px;
        }
        .dialog_addGroup_groupList_container{
            height: 240px;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .dialog_addGroup_groupList_container::-webkit-scrollbar{
          width:5px;
          height:10px;
          /**/
        }
        .dialog_addGroup_groupList_container::-webkit-scrollbar-track{
          background: rgb(239, 239, 239);
          border-radius:2px;
        }
        .dialog_addGroup_groupList_container::-webkit-scrollbar-thumb{
          background: #bfbfbf;
          border-radius:10px;
        }
        .dialog_addGroup_groupList_container::-webkit-scrollbar-thumb:hover{
          background: #333;
        }
        .dialog_addGroup_groupList_container::-webkit-scrollbar-corner{
          background: #179a16;
        }
        .dialog_addGroup_groupList_container li{
            display: flex;
            align-items: center;
            padding-top: 20px;
            padding-right: 10px;
        }
        .dialog_addGroup_groupList_container li:first-child{
            padding-top: 10px;
        }
        .dialog_addGroup_groupList_container li img{
            width: 40px;
            height: 40px;
            border-radius: 3px;
            margin-right: 11px;
        }
        .dialog_addGroup_groupList_content{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .dialog_addGroup_groupListLeft_content{
            flex: 1;
        }
        .dialog_addGroup_groupListLeft_content h3{
            color: #222;
            font-size: 14px;
            font-weight: 500;
        }
        .dialog_addGroup_groupListLeft_content h4{
            font-size: 12px;
            color: #999;
            opacity: .85;
        }
        .dialog_addGroup_groupListRight_content{
            
        }
        .dialog_addGroup_groupListRight_content input{
            cursor: pointer;
        }
        .dialog_addGroup_groupListLeft_content p{
            
        }
        /*弹窗部分 end*/
    </style>

</head>

<body>
    <div id="app">
    	<div class="publicTablesTitle_container">
    		<p>群日历</p>
    	</div>
    	<div class="publicTables_container">
    		<div class="publicTables_header_container">
    			<el-button type="primary" size="medium" @click="goAdd">创建日历</el-button>
    			<div class="publicTables_headerSearch_container">
    				<el-input placeholder="请输入内容" size="medium">
    				    <el-button slot="append" icon="el-icon-search"></el-button>
    				</el-input>
    			</div>
    		</div>
    		<div class="publicTables_main_container">
    			<el-table :data="tableData" border style="width: 100%" size="medium" :header-cell-style="!{background:'#FAFAFA'}">
                    <el-table-column prop="calendar_name" label="名称" width="200"></el-table-column>
                    <el-table-column prop="group" label="试用群聊">
                        <template slot-scope="scope">
                            <el-tag style="margin-right:10px" v-for="(item,index) in scope.row.groups.slice(0,3)">!{!{item.name}}</el-tag>
                            <span v-if="scope.row.groups.length > 3 ">等!{!{scope.row.groups.length-3}}个群聊</span>
                        </template>  
                    </el-table-column>
                    <el-table-column prop="ctime" label="创建时间" width="200"></el-table-column>
                    <el-table-column label="开关" width="150">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.status" active-value="1" inactive-value="0"  @change="changeSwitch(scope.row)" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" width="250">
                        <template slot-scope="scope" >
                            <el-button size="mini" type="primary" @click="handleAddGroup(scope.row)">添加群聊</el-button>
                            <el-button size="mini" type="success" @click="handleEdit(scope.row)">详情</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
    			</el-table>
    			<el-pagination background layout="prev, pager, next" :total="total" style="padding-top: 20px;"></el-pagination>
    		</div>
    	</div>
        <!-- 弹窗 start -->
            <el-dialog title="选择群聊" :visible.sync="dialogAddGroupVisible" width="30%" center v-cloak>
              <div class="dialog_addGroup_container">
                  <div class="dialog_addGroupSearch_container">
                      <el-input size="small" placeholder="请输入群名称" v-model="searchGroupName" class="input-with-select">
                          <el-button slot="append" icon="el-icon-search" @click="searchGroupNameFun"></el-button>
                      </el-input>
                  </div>
                  <div class="dialog_addGroup_allGroup_container">
                      <div class="dialog_addGroup_allGroupLeft_container">
                          <span>全部群聊（!{!{group_list.length}}）：</span>
                      </div>
                        <div class="dialog_addGroup_allGroupRight_container">
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                        </div>
                  </div>
                  <ul class="dialog_addGroup_groupList_container">
                        <el-checkbox-group v-model="checkList" @change="handleCheckedList">
                            <li v-for="item in group_list">
                             <img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/7689e267e0681e8dde83361a0041ebc1.png">
                             <div class="dialog_addGroup_groupList_content">
                                <div class="dialog_addGroup_groupListLeft_content">
                                     <h3>!{!{item.name}}</h3>
                                     <h4>群主：!{!{item.user_name}}</h4>
                                </div>
                                <div class="dialog_addGroup_groupListRight_content">
                                    <el-checkbox v-model="item.id" :label="item.id"></el-checkbox>
                                </div>
                             </div>
                            </li>
                        </el-checkbox-group>
                  </ul>
                  <el-row justify="end" type="flex" style="padding-top: 8px;">
                    <el-button size="small" @click="dialogAddGroupVisible = false">取消</el-button>
                    <el-button size="small" type="primary" @click="submitDialogAddGroupFun">确定</el-button>
                  </el-row>
              </div>
          </el-dialog>
    </div>
    <script src="/unpkg/unpkg.vue.js"></script>
    <script src="/cdn/qs.min.js"></script>
    <script src="/unpkg/lib-master/index.js"></script>
    <script src="/unpkg/unpkg.axios.min.js"></script>
    <script type="text/javascript">
        var myapp = new Vue({
            el: '#app',
            data() {
                return {
                    tableData: [],
                    allGroupOption: false,
                    dialogAddGroupVisible:false,
                    searchGroupName: null,
                    currentId:null,
                    isIndeterminate: false,
                    checkAll: false,
                    group_list: [],
                    checkList: [],
                    total:0,
                    paged:1,
                    sizes:10
                };
            },
            mounted() {
                this.getList()
            },
            methods: {
                getList(){
                    let loading = this.$loading(!{text: '请稍等...'});
                    axios.get('/Addons/Groupcalendar/Admin/Calendar/index.html').then( (response) => {
                        loading.close();
                        this.tableData = response.data.data.items;
                        this.total = response.data.data.count
                    }) 
                },
            	changeSwitch (row) {
                    let loading = this.$loading(!{text: '请稍等...'});
                    axios.post('/Addons/Groupcalendar/Admin/Calendar/upd_status.html',{
                        id: row.id,
                        status: row.status,
                    }).then( (response) => {
                        loading.close();
                        if(response.data.status=='success') return this.$message.success(response.data.msg)
                        this.$message.error(response.data.msg)
                        return this.getList()
                    })
            	},
                goAdd(){
                    window.location.href='add.html'
                },
            	// 添加群聊
            	handleAddGroup (row) {
                    this.currentId = row.id
                    let loading = this.$loading(!{text: '请稍等...'});
                    axios.post('/Addons/Groupcalendar/Admin/Calendar/select_grounp.html',{
                        id: row.id,
                        keywords: this.searchGroupName
                    }).then( (response) => {
                        loading.close();
                        if(response.data.status != 'success') return this.$message.error(response.data.msg)
                        this.dialogAddGroupVisible = true;
                        this.group_list = response.data.data.group_list
                        response.data.data.group_list.forEach( item => {  if(item.option){ this.checkList.push(item.id) }  })
                        this.isIndeterminate = this.checkList.length > 0; 
                    })
            	},
                handleCheckAllChange(val) {
                    if(val) { this.group_list.forEach(item => { this.checkList.push(item.id)}); } else { this.checkList = [] }
                    this.isIndeterminate = false;
                },
                handleCheckedList() {
                    this.checkAll = this.checkList.length === this.group_list.length;
                    this.isIndeterminate = this.checkList.length > 0 && this.checkList.length < this.group_list.length;
                },
            	// 编辑
            	handleEdit (row) {
                    let obj = JSON.parse(JSON.stringify(row));
            		window.location.href = 'detail.html?id='+ obj.id
            	},
            	// 删除
            	handleDelete (row) {
                    let loading = this.$loading(!{text: '请稍等...'});
                    axios.post('/Addons/Groupcalendar/Admin/Calendar/del_calendar.html',{
                        id: row.id
                    }).then( (response) => {
                        loading.close();
                        if(response.data.status=='success'){
                            window.location.href='list.html'
                        } 
                        this.getList()
                        return this.$message.error(response.data.msg)
                    })
            	},
                submitDialogAddGroupFun:function(e){
                    this.dialogAddGroupVisible = false;
                    let loading = this.$loading(!{text: '请稍等...'});
                    axios.post('/Addons/Groupcalendar/Admin/Calendar/add_group.html',{
                        id: this.currentId,
                        ids: this.checkList.join(',')
                    }).then( (response) => {
                        loading.close();
                        if(response.data.status!='success') return this.$message.error(response.data.msg)
                        this.getList()
                        return this.$message.success(response.data.msg)
                    })
                },
                searchGroupNameFun:function(e){
                    let loading = this.$loading(!{text: '请稍等...'});
                    axios.post('/Addons/Groupcalendar/Admin/Calendar/select_grounp.html',{
                        id: this.currentId,
                        keywords: this.searchGroupName
                    }).then( (response) => {
                        loading.close();
                        if(response.data.status != 'success') return this.$message.error(response.data.msg)
                        this.dialogAddGroupVisible = true;
                        this.group_list = response.data.data.group_list
                        response.data.data.group_list.forEach( item => {  if(item.option){ this.checkList.push(item.id) }  })
                        this.isIndeterminate = this.checkList.length > 0; 
                    })
                },
            },
        })
    </script>
</body>

</html>